<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
        // 1.过滤器可以给数据进行添油加醋
        // 需求：数据翻转
        // 需求实现：1：为了互动性更好，用input+v-model来获取数据到vue中
        // 2:输出：{{ 内容 | 使用过滤器输出 }}
        //
        var App = {
            template: `<div>
                <input type='text' v-model='myText' />
                {{myText | reverse('人民币：')}}
            </div>`,
            data: function(){
                return {
                    myText: ''
                }
            },
            // 组件内过滤器
            filters: {
                reverse: function(dataStr,data){ //参数1就是传递的元数据，参数2是括号里面的参数

                    return  data + dataStr.split('').reverse().join(''); // 显示的内容

                }
            }
        };
        // 全局过滤器
        Vue.filter('myreverse',function(data,arg1){
            return 'xxxx'
        });
        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template:'<app/>'
        });

    </script>
</body>
</html>